<!--
 * @Author: QinJiu
 * @Date: 2022-07-20 11:23:57
 * @LastEditors: Qinjiu
 * @LastEditTime: 2022-07-20 15:30:05
 * @Description:
-->
<template>
  <div class="login-container">
    <div class="form-container">
      <div class="title-container">系统登录</div>
      <!-- 表单 -->
      <el-form ref="formRef" :model="formData" :rules="formRules">
        <!-- 账号 -->
        <el-form-item prop="username">
          <span class="icon-container">
            <!-- Element-Icon -->
            <i class="el-icon-user-solid"></i>
          </span>
          <el-input
            v-model="formData.username"
            placeholder="账号"
            type="text"
            clearable
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <span class="icon-container">
            <!-- IconFont -->
            <svg-icon icon-class="icon-mima" />
          </span>
          <el-input
            v-model="formData.password"
            :type="passwordType"
            placeholder="密码"
          />
          <span class="show-pwd cursor-pointer" @click="changePwdType">
            <!-- 本地Svg -->
            <svg-icon
              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-form-item>
      </el-form>
      <div class="operation-container">
        <el-button type="primary" :loading="loginLoading" @click="login"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import to from "@/utils/await-to.js";
import { showDesktopNotify } from "@/utils/desktop-notify";
import md5 from "md5";

export default {
  data() {
    return {
      formData: {
        username: "admin", // 账号
        password: "123456", // 密码
      },
      formRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
      loginLoading: false,
      passwordType: "password", // 密码输入框类型
    };
  },
  methods: {
    /**
     * 显示/隐藏密码
     */
    changePwdType() {
      if (this.passwordType === "password") {
        this.passwordType = "text";
      } else {
        this.passwordType = "password";
      }
    },
    /**
     * 点击登录
     */
    login() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          const params = {
            username: this.formData.username,
            password: md5(this.formData.password), // md5加密
          };
          this.loginLoading = true;
          await this.asyncLogin(params);
          this.loginLoading = false;
        }
      });
    },
    async asyncLogin(params) {
      const [error, result] = await to(
        this.$store.dispatch("user/login"),
        params
      );
      if (error) {
        // showDesktopNotify("登录", { body: error });
        this.$notify({
          title: "成功",
          message: error ?? "登录失败！",
          type: "error",
        });
      } else {
        // 一顿判断 -> 此处模拟成功
        // ......
        // showDesktopNotify("登录", { body: "成功！" });
        this.$notify({
          title: "成功",
          message: "登录成功！",
          type: "success",
        });

        // 根据用户权限动态添加可访问路由表
        await this.$store.dispatch(
          "permission/generateRoutes",
          this.$store.getters.roles
        );

        this.$router.push({
          path: this.$route.query.redirect || "/",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@FORM_WIDTH: 350px;
@FORM_HEIGHT: 300px;

// 重置element样式
::v-deep .el-input {
  .el-input__inner {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    // 解决回填后带背景色问题
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      transition-delay: 999999s;
      transition: color 999999s ease-out, background-color 999999s ease-out;
    }
  }
}

.login-container {
  width: 100%;
  height: 100%;
  min-width: @FORM_WIDTH;
  min-height: @FORM_HEIGHT;
  overflow: auto;
  background-color: #2d3a4b;
  color: #fff;
  position: relative;
  overflow: hidden;
  .form-container {
    width: @FORM_WIDTH;
    height: @FORM_HEIGHT;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 24px 12px;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 10px;
    .title-container {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
    }
    ::v-deep .el-form {
      margin-top: 64px;
      .el-form-item {
        .el-form-item__content {
          position: relative;
          .icon-container {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 32px;
            text-align: center;
          }
          .el-input {
            width: 100%;
          }
          .el-input__inner {
            padding-left: 32px;
            padding-right: 32px;
          }
          .show-pwd {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 32px;
            text-align: center;
          }
        }
      }
    }
    .operation-container {
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
